<template>
    <h1>这是王承烨的页面</h1>
    <to-do-header @addToDo="addToDo"></to-do-header>
    <to-do-main :list="showList" @delTodo="delTodo"></to-do-main>
    <to-do-footer :lastLength="lastLength" :status="status" @updateStatus="updateStatus"></to-do-footer>
</template>

<script setup>
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';
import ToDoFooter from './components/ToDoFooter.vue';
import { ref,computed } from 'vue';
const list = ref([
    {id:1,name:'学习Vue3',done:false},
    {id:2,name:'跑步',done:true},
]);
function addToDo(name) {
    if (name && name.trim() !== '') {
        list.value.push({name, id: Date.now(), done: false});
    }else {
        alert('任务不能为空');
    }
}
function delTodo(id) {
    list.value = list.value.filter((item)=> item.id !== id);
}   
//计算未完成总数
const lastLength = computed(()=> list.value.filter((item)=> !item.done).length);
//定义任务状态
const status = ref('所有');
const showList = computed(()=> {
    if (status.value == '所有') {
        return list.value;
    }
     if (status.value == '待办') {
        return list.value.filter((item)=> !item.done);
    }
     if (status.value == '完成') {
        return list.value.filter((item)=> item.done);
    }
}); 
function updateStatus(statuss) {
    status.value = statuss;
}
</script>

<style scoped>

</style>